<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style type="text/css">
        .login-form{
            width: 450px;
            height: 220px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            box-shadow: 0 0 25px #909399;
            margin: 150px auto;
            padding: 35px 35px 15px 35px;
        }
        .login-title{
            text-align: center;
            margin: 0 auto 10px auto;
            color: #303133;
        }
        body{
            background-image: url("/img/login.jpeg");
            background-repeat: no-repeat;
            background-size: 100%;
        }
    </style>

</head>
<body>
<div id="div">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px"  class="login-form">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button @click="toRegister()">注册</el-button>
        </el-form-item>
    </el-form>
</div>
</body>

<script type="application/javascript">
    new Vue({
        el:'#div',
        data: {
                loginForm: {},
                rules: {
                    acount: [
                        { required: true, message: '请输入账号名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
        },
        mounted(){

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/user/login?username="+this.loginForm.username+"&password="+this.loginForm.password).then(res=>{
                            if(res.data=='登录成功'){
                                //登录成功 页面跳转
                                location.href="/toIndex";
                            }else{
                                //登录失败
                                this.$message({
                                    showClose: true,
                                    message: res.data,
                                    type: 'error'
                                });
                            }
                        });
                    }
                });
            },
            toRegister() {
                location.href="/toRegister";
            },
        }
    });
</script>
</html>
